<template>
  <div class="work-record">
    <!-- 头部搜索部分 -->
    <searchHeader
      ref="searchHeader"
      :list-query="listQuery"
      @initTable="initTable"
      @initdataInfo="initdataInfo"
    />
    <!-- 饼图展示位 -->
    <el-card
      v-if="dataInfo.length>0||Object.keys(statistics).length>0"
      class="echarts-container"
      style="min-height: 46px; margin-top: 8px;"
      shadow="never">
      <myEcharts :statistics="statistics" class="echarts-box"/>
      <div class="data-list">
        <div v-for="(item,key,index) in dataInfo" :key="index" class="data-item">
          <div class="item-right">
            <span>{{ key }}</span>
            <span :style="{'color':fontColor[index]}" class="item-right-info">{{ item }}</span>
          </div>
          <div class="item-left"><img :src="iconList[index]" alt=""></div>
        </div>
      </div>
    </el-card>
    <!-- 表格展示位 -->
    <el-card
      v-if="tableData.length>0"
      style="min-height: 46px; margin-top: 8px"
      shadow="never"
      class="box-card">
      <el-table
        :data="tableData"
        :span-method="arraySpanMethod"
        :row-class-name="setclassName"
        :header-cell-style="{ background: '#F4F7FC', color: '#5D7597' }"
        default-expand-all
        border
        style="width: 100%"
      >
        <el-table-column label="TrackList" width="280">
          <template slot-scope="scope">
            <div class="cell-box">
              <div class="cell-item">
                <div class="cell-name">Work Order:</div>
                <div class="cell-info">{{ scope.row.workOrder }}</div>
              </div>
              <div class="cell-item">
                <div class="cell-name">Customer:</div>
                <div class="cell-info">{{ scope.row.custName }}</div>
              </div>
              <div class="cell-item">
                <div class="cell-name">Customer LotID:</div>
                <div class="cell-info">{{ scope.row.custLotId }}</div>
              </div>
              <div class="cell-item">
                <div class="cell-name">LotID:</div>
                <div class="cell-info">
                  <el-link
                    :underline="false"
                    type="primary"
                    @click="handleLotInfo(scope.row)">{{ scope.row.lotId }}</el-link>
                </div>
              </div>
              <div class="cell-item">
                <div class="cell-name">Handler:</div>
                <div class="cell-info">{{ scope.row.eqp1Id }}</div>
              </div>
              <div class="cell-item">
                <div class="cell-name">Tester:</div>
                <div class="cell-info">{{ scope.row.eqp2Id }}</div>
              </div>
              <div class="cell-item">
                <div class="cell-name">Track In:</div>
                <div class="cell-info">{{ scope.row.trackStamp }}</div>
              </div>
              <div class="cell-item">
                <div class="cell-name">Track Out:</div>
                <div class="cell-info">{{ scope.row.trackOutStamp }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="trStep" label="Test Step" width="100"/>
        <el-table-column prop="stepTime" label="Step Time" width="160"/>
        <el-table-column label="Summary List" width="200">
          <template slot-scope="scope">
            <div v-for="(i,index) in scope.row.summaryList" :key="index">
              <el-link
                :underline="false"
                type="primary"
                @click="$router.push({name:'SummaryReview',
                                      params:{eqp1Id:scope.row.eqp1Id,eqp2Id:scope.row.eqp2Id,eventId:scope.row.eId}})">{{ i }}</el-link>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="statusName" label="Status" width="100"/>
        <el-table-column prop="systemTime" label="Start Time" width="100"/>
        <el-table-column prop="nextSystemTime" label="End Time" width="100"/>
        <el-table-column prop="duration" label="Duration" width="80"/>
        <el-table-column prop="RemarkBtn" label="Remark" width="150">
          <template slot-scope="scope">
            <i v-if="scope.row.remarkBtn === 1" class="el-icon-edit" style="color:rgb(19, 154, 246)">
            <el-link :underline="false" type="primary" @click="openDialog(scope.row)">Add</el-link></i>
            <span v-else>{{ scope.row.remarkBtn }}</span>
          </template>
        </el-table-column>
        <el-table-column label="Test Step Summary" width="400">
          <template slot-scope="scope">
            <div class="step-summary">
              <span v-for="(item,key,index) in scope.row.stepSum" :key="index" class="summary-item">
                <img :src="smallIconList[index]">
                <span :style="{'color':fontColor[index]}" class="item-right-info">{{ key }}:{{ item }}</span>
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column type="expand" width="1">
          <template slot-scope="scope">
            <div class="expend-summary">
              <div v-for="(item,key,index) in scope.row.stepSum" :key="index" class="expend-summary-item">
                <img :src="tagImgList[index]">
                <div>{{ item }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.size"
        @pagination="getList"
      />
    </el-card>
    <!-- Add弹窗组件 -->
    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :before-close="handleRemarkClose"
      title="Add Remark"
      width="35%">
      <el-form :inline="true" :model="formInline">
        <el-form-item label="操作员注释" label-width="130px">
          <el-select v-model="remark" style="width:300px">
            <el-option
              v-for="item in remarkList"
              :key="item.id"
              :label="item.name"
              :value="item.id"/>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="doSaveRemark">确 定</el-button>
      </span>
    </el-dialog>
    <!-- Lot Info弹窗组件 -->
    <lofInfoDialog ref="lofInfoDialog"/>
  </div>
</template>
<script>
import workRecordApi from '@/api/production/workRecord'
import networkTips from '@/mixins/networkTips'
import systemApi from '@/api/system/attributes'
import searchHeader from './components/searchHeader'
import myEcharts from './components/myEcharts'
import lofInfoDialog from './components/lotInfo'
export default {
  name: 'WorkRecord',
  components: {
    searchHeader,
    myEcharts,
    lofInfoDialog
  },
  mixins: [networkTips],
  data() {
    return {
      tableData: [],
      dataInfo: [],
      iconList: [
        require('../../../assets/images/list_ico_total.png'),
        require('../../../assets/images/list_ico_good.png'),
        require('../../../assets/images/list_ico_reject.png'),
        require('../../../assets/images/list_ico_tield.png')
      ],
      smallIconList: [
        require('../../../assets/images/list_ico_tag_total.png'),
        require('../../../assets/images/list_ico_tag_good.png'),
        require('../../../assets/images/list_ico_tag_reject.png'),
        require('../../../assets/images/list_ico_tag_yield.png')
      ],
      tagImgList: [
        require('../../../assets/images/list_tag_total.png'),
        require('../../../assets/images/list_tag_good.png'),
        require('../../../assets/images/list_tag_reject.png'),
        require('../../../assets/images/list_tag_yield.png')
      ],
      fontColor: ['rgb(26, 140, 254)', 'rgb(53, 195, 109)', 'rgb(255, 152, 95)', 'rgb(138, 130, 249)'],
      statistics: {},
      total: 0,
      listQuery: {
        page: 1,
        size: 10
      },
      dialogVisible: false,
      formInline: {},
      eId: '',
      remarkList: [],
      remark: ''
    }
  },
  methods: {
    // 初始化表格
    initTable(val) {
      this.tableData = val.eLotModel
    },
    // 初始化展示数据
    initdataInfo(val) {
      this.dataInfo = val.data.pageSum
      this.statistics = val.data.pageSum
      this.total = val.total
    },
    // 打开lotinfo弹窗
    handleLotInfo(val) {
      this.$refs.lofInfoDialog.handleOpen(val)
    },
    // 打开备注弹窗
    openDialog(val) {
      this.eId = val.eId
      systemApi.selectitemlist({ name: 'WORKSHEET_REMARK' }).then(res => {
        this.remarkList = res.data
      })
      this.dialogVisible = true
    },
    // 关闭备注弹窗
    handleRemarkClose() {
      this.remark = ''
      this.remarkList = []
      this.dialogVisible = false
      this.$refs.myHeader.doSearch()
    },
    // 保存备注
    doSaveRemark() {
      workRecordApi.doSaveRemark({ eventId: this.eId, remark: this.remark }).then(res => {
        this.netTips(res, this.handleRemarkClose)
      })
    },
    // 切换分页
    getList(val) {
      new Promise(resolve => {
        this.listQuery = val
        resolve()
      }).then(() => {
        this.$refs.searchHeader.doSearch()
      })
    },
    // 合并表格
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex === row.lotInfoRowIndex) {
          return [row.lotInfoMergeNum, 1]
        } else {
          return [0, 0]
        }
      }
      if (columnIndex === 1 || columnIndex === 2 || columnIndex === 9) {
        if (rowIndex === row.stepRowIndex) {
          return [row.stepMergeNum, 1]
        } else {
          return [0, 0]
        }
      }
    },
    setclassName({ row, rowIndex }) {
      if (rowIndex + 1 === (row.lotInfoMergeNum + row.lotInfoRowIndex)) {
        // 别问为什么这样写
      } else {
        return 'set-none-row'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .set-none-row+tr{
  display: none;
  border: 0;
}
::v-deep .el-card__body {
  width: 100%;
  display: flex;
}
::v-deep .el-table__expand-icon {
  display: none;
}
.el-table{
  border: 1px solid #6EB1F0;
}
.work-record {
  .box-card{
    ::v-deep .el-card__body{
      width: 100%;
      display: block;
    }
  }
  .echarts-container {
    ::v-deep .el-card__body{
      display: flex;
      align-items: center;
    }
  }
  .echarts-box{
    flex: 3;
  }
  .data-list {
    flex: 5;
    height: 150px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .data-item {
      flex: 1;
      height: 100px;
      background-color: #f5f6fb;
      margin-right: 15px;
      border-radius: 6px;
      display: flex;
      justify-content: space-between;
      text-align: center;
      box-sizing: border-box;
      .item-right{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        font-size: 16px;
        padding: 10px 0;
        .item-right-info{
          font-size: 20px;
          font-weight: bold;
        }
      }
      .item-left{
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        img{
          width: 40px;
          height: 40px;
        }
      }
    }
  }
}
.cell-box {
  width: 280px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  padding: 5px;
  box-sizing: border-box;
  .cell-item {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 5px 0;
    box-sizing: border-box;
    .cell-name {
      background-color: #dcf0fe;
      margin-right: 5px;
      font-size: 13px;
      font-weight: bold;
      box-sizing: border-box;
    }
    .cell-info {
      box-sizing: border-box;
      width: 60%;
      word-break: break-all;
      word-wrap: break-word;
      text-align: left;
    }
  }
}
.step-summary{
  display: flex;
  justify-content: center;
  .summary-item{
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      img{
        padding-right: 5px;
      }
  }
}
.expend-summary{
  display: flex;
  justify-content: center;
  height: 30px;
  text-align: center;
  .expend-summary-item{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    img{
      margin-right: 5px;
    }
  }
}
</style>
